<template>
  <div id="app">


    <el-form label-width="120px" style="margin-top: 20px" :inline="true">

      <div style="margin-left:40px;margin-bottom: 10px" >
        <el-button type="primary" icon="el-icon-search" @click="searchVehicles">搜索</el-button>
        <el-button type="info" icon="el-icon-refresh-right" @click="cleanInput">重置</el-button>
      </div>

      <el-form-item label="需求单号：">
        <el-input placeholder="请输入需求单号："
                  v-model="inputOrder"
                  clearable></el-input>
      </el-form-item>

      <el-form-item label="客户名称：">
        <el-input placeholder="请输入客户名称："
                  v-model="inputName"
                  clearable></el-input>
      </el-form-item>

      <el-form-item label="路线：">
        <el-input placeholder="请输入路线："
                  v-model="inputDeparture"
                  clearable></el-input>
      </el-form-item>

    </el-form>

    <el-divider></el-divider>
    <div style="margin-left:40px">
      <el-button type="success" @click="refreshPage" v-loading.fullscreen.lock="fullscreenLoading" icon="el-icon-refresh" >刷新</el-button>
    </div>


    <el-table
      :data="vehicles"
      ref="arr"
      tooltip-effect="dark"
      style="width: 100%;margin-left: 40px"
      @selection-change="selectionAll">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        prop="vOrderId"
        label="需求单号">
      </el-table-column>

      <el-table-column
        prop="need.orderId"
        label="订单单号">
      </el-table-column>

      <el-table-column
        prop="need.orderType"
        label="订单类型 "
        width="130px"
      >
        <template slot-scope="scope">
          <el-select v-model="scope.row.need.orderType" placeholder="选择订单类型" disabled>
            <el-option
              v-for="(item,index) in orderTypes"
              :key="index"
              :label="item"
              :value="index">
            </el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column
        prop="need.transType"
        label="运输类型">
        <template slot-scope="scope">
        <el-select v-model="scope.row.need.transType" placeholder="选择运输方式" disabled>
          <el-option
            v-for="(item,index) in transTypes"
            :key="index"
            :label="item"
            :value="index">
          </el-option>
        </el-select>
        </template>
      </el-table-column>

      <el-table-column
        prop="need.cName"
        label="客户名称">
      </el-table-column>

      <el-table-column
        prop="need.cTime"
        label="下单时间"
        format='yyyy-MM-dd-HH-mm-ss'
        width="160px"
      >
      </el-table-column>

      <el-table-column
        prop="need.route"
        label="路线">
      </el-table-column>

      <el-table-column
        prop="need.gNumber"
        label="数量(个)">
      </el-table-column>

      <el-table-column
        prop="need.gWeight"
        label="重量(千克)">
      </el-table-column>

      <el-table-column
        prop="need.gVolume"
        label="体积(方)">
      </el-table-column>

      <el-table-column
        prop="operate"
        label="操作">
        <template slot-scope="scope">
          <el-button @click="quicklySend" type="primary" size="small">快速派车</el-button>
          <el-button @click="OnSubmit(scope.$index)" type="danger" size="small">提交</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!--  添加弹框  -->
    <el-dialog
      title="车辆信息"
      :visible.sync="addDialogVisible"
      width="30%"
      >

      <el-form label-width="80px">

        <el-form-item label="承运商">
          <el-select v-model="carrierName" placeholder="请选择" @change="changeCarrier" clearable>
            <el-option
              v-for="carrier in carriers"
              :label="carrier.carrierName"
              :value="carrier.carrierName"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="车牌号">
          <el-select v-model="carPlate" @change="changCarType" clearable>
            <el-option
              v-for="carManagement in carManagements"
              :label="carManagement.carPlate"
              :value="carManagement.carPlate"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="司机">
          <el-select v-model="driverName" placeholder="请选择司机" clearable>
            <el-option
              v-for="driver in drivers"
              :label="driver.driverName"
              :value="driver.driverName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>


      <span slot="footer" class="dialog-footer">
    <el-button type="warning" @click="saveCarInfo()">保存</el-button>
    <el-button @click="cleanCarInfo" >取 消</el-button>
      </span>

    </el-dialog>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        //订单类型列表
        orderTypes:["运输订单","配送订单"],
        //运输方式列表
        transTypes:["火车","航运","海运","汽车"],
        currentPage:1,
        pageSizes:[2,4,6],
        pageSize:2,
        total:0,
        vehicles:[],
        vehicle:{},
        fullscreenLoading: false,
        inputOrder: '',
        inputName: '',
        inputDeparture: '',
        inputDestination: '',
        arr:[],
        addDialogVisible: false,
        carriers: [],
        carrier: {},
        carPlate:'',
        carrierNumber: '',
        carrierName: '',
        carManagements: [],
        carManagement: {},
        drivers:[],
        driverName:[],
      }
    },
    methods: {
      searchVehicles(){
        this.findVehicles(this.currentPage,this.pageSize,this.inputOrder,this.inputName,this.inputDeparture)
        // this.$http({
        //   method:"get",
        //   url:"http://localhost/vehicle/search",
        //   parmas:{
        //     currentPage:this.currentPage,
        //     pageSize:this.pageSize,
        //     inputOrder:this.inputOrder,
        //     inputName:this.inputName,
        //     inputDeparture:this.inputDeparture
        //   }
        // })
      },
      OnSubmit(index){

        if (this.driverName === ''){
          this.$message({
            message: '请先派车！',
            type: 'error'
          });
          return;
        }

        let vehicle = this.vehicles[index]
        vehicle.carrierName = this.carrierName;
        vehicle.carPlate = this.carPlate;
        vehicle.driverName = this.driverName;

        console.log(vehicle)

        this.$http.post('http://localhost/vehicle/create',vehicle)
          .then(resp=>{
            if (resp.data.code === 100000){
              this.$message({
                message: '提交成功',
                type: 'success'
              });

            }else{
              this.$message({
                message: '提交失败',
                type: 'error'
              });
            }
            this.findVehicles(1,2);
          })
      },

      findVehicles(currentPage,pageSize,inputOrder,inputName,inputDeparture){
        console.log(inputOrder)
        console.log(inputName)
        console.log(inputDeparture)
        this.$http({
          method:"GET",
          url:"http://localhost/vehicle/page",
          params:{
            currentPage:currentPage,
            pageSize:pageSize,
            inputOrder: inputOrder,
            inputName: inputName,
            inputDeparture: inputDeparture,
          }
        }).then(resp=>{
          console.log('vehicles = ',resp.data.data);
          this.vehicles = resp.data.data.list;
          this.total = resp.data.data.total;
        })
      },
      refreshPage(){
        this.findVehicles(this.currentPage,this.pageSize);
        this.fullscreenLoading = true;
        setTimeout(() => {
          this.fullscreenLoading = false;
        }, 1000);
        this.$message({
          message: '刷新成功',
          type: 'success'
        });
      },
      cleanInput(){
        this.inputOrder='';
        this.inputName='';
        this.inputDeparture='';
        this.inputDestination='';
      },

      selectionAll(val){
        this.arr=val;
        console.log(this.arr);
      },
      quicklySend(){
        this.addDialogVisible = true
      },
      saveCarInfo(){
        console.log(this.carrierName,this.carPlate,this.driverName);

        this.addDialogVisible = false;

          this.$message({
            message: '保存成功',
            type: 'success'
          });

      },
      cleanCarInfo(){
        this.carrierName ='';
        this.carPlate = '';
        this.driverName = '';
        this.addDialogVisible = false
      },
      changCarType(carPlate) {

        //重新选择承运商时，清空缓存的车辆车牌和司机
        this.driverName = '';
        console.log(carPlate);

        for (let carManagement of this.carManagements) {
          if (this.carPlate == carManagement.carPlate) {
            this.carNumber = carManagement.carNumber;
          }
          console.log('选择车牌号码对应的车辆编号为：', this.carNumber);
        }

        this.$http({
          method: "get",
          url: "http://localhost/carDriver/search",
          params: {
            carNumber: this.carNumber
          }
        }).then(resp => {
          if (resp.data.code === 100000) {
            console.log(resp.data.data);
            this.drivers = resp.data.data;
          }
        })


        // this.carPlate = carPlate
        // console.log(carPlate);
        // this.$http({
        //   method: "get",
        //   url: "http://localhost/carDriver/search",
        //   params:{
        //     carPlate:carPlate
        //   }
        // }).then(resp=>{
        //   if (resp.data.code == 100000) {
        //     console.log(resp.data.data);
        //     this.drivers = resp.data.data;
        //   }
        // })

      },
      //下拉框发生改变时触发
      changeCarrier(val) {
        console.log(val);
        this.$http({
          method: "get",
          url: "http://localhost/carManagement/search",
          params:{
            carrierName:val
          }
        }).then(resp => {
          if (resp.data.code == 100000) {
            console.log(resp.data.data);
            this.carManagements = resp.data.data;
          }
        })
      },
      //查询所有承运商
      findCarrier() {
        this.$http({
          method: "get",
          url: "http://localhost/carCarrier/list"
        }).then(resp => {
          if (resp.data.code == 100000) {
            console.log(resp.data.data);
            this.carriers = resp.data.data;
          }
        })
      },
      handleSizeChange(val){
        this.pageSize = val;
        this.findVehicles(this.currentPage,this.pageSize);
      },
      handleCurrentChange(val){
        this.currentPage = val;
        this.findVehicles(this.currentPage,this.pageSize);
      }
    },
    created() {
      //查询 整车信息单
      this.findVehicles(1,2);
      //查询车辆信息表
      this.findCarrier();
    },
  }
</script>

<style scoped>

  .el-divider {
    margin: 8px 0;
    background: 0 0;
    border-top: 10px solid #E6EBF5;
  }

  .div1{
    margin-left:40px;
    border-bottom: 1px;
  }

</style>
